<template>
<div>

  <el-form :inline="true" :model="populationVo" class="demo-form-inline">
    <el-form-item label="名字">
      <el-input v-model="populationVo.name" placeholder="名字" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="populationList()">查询</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="arr" style="width: 100%">

    <el-table-column
      label="实有人口id">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="姓名">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="性别">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.sex }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="人脸照片">
      <template slot-scope="scope">
<!--          <el-image :src="scope.row.photo.split(',')[0]"></el-image>-->
<!--        <span style="margin-left: 10px">{{ scope.row.sex }}</span>-->
        <img v-for="i in scope.row.photo.split(',')" :src="i" width="100px" height="70px">
      </template>
    </el-table-column>

    <el-table-column
      label="证件号">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="电话号码">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="人员类型">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.typeId==1">户籍人员</span>
        <span style="margin-left: 10px" v-if="scope.row.typeId==2">外来人用</span>
        <span style="margin-left: 10px" v-if="scope.row.typeId==3">境外人员</span>
      </template>
    </el-table-column>

    <el-table-column
      label="小区地址">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.plotName }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="身份标签">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.tagName }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="户籍地址">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.homeAddress }}</span>
      </template>
    </el-table-column>


    <el-table-column
      label="状态">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.status==1">迁入</span>
        <span style="margin-left: 10px" v-if="scope.row.status==2">迁出</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="populationVo.pageNum"
    :page-sizes="[3, 9, 12, 18, 24]"
    :page-size="populationVo.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>

  <el-button type="primary" @click="dialogFormVisible = true">点击添加</el-button>

  <el-dialog title="信息" :visible.sync="dialogFormVisible">
    <el-form :model="population">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="population.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="population.sex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="人脸照片" :label-width="formLabelWidth">
        <el-upload
          action="/dev-api/system/communityPopulation/upload"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="证件号" :label-width="formLabelWidth">
        <el-input v-model="population.idCard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" :label-width="formLabelWidth">
        <el-input v-model="population.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="人员类型" :label-width="formLabelWidth">
<!--        <el-select v-model="population.typeId" placeholder="请选择活动区域" clearable>-->
<!--          <el-option label="户籍人员" value="人员类型"></el-option>-->
<!--          <el-option label="外来人员" value="人员类型"></el-option>-->
<!--          <el-option label="境外人员" value="人员类型"></el-option>-->
<!--        </el-select>-->
<!--        <el-form-item label="状态" :label-width="formLabelWidth">-->
        <el-radio v-model="population.typeId" label="1">户籍人员</el-radio>
        <el-radio v-model="population.typeId" label="2">外来人员</el-radio>
        <el-radio v-model="population.typeId" label="3">境外人员</el-radio>
<!--      </el-form-item>-->
      </el-form-item>
      <el-form-item label="小区地址(精确到房间号)" :label-width="formLabelWidth">
        <el-input v-model="population.addressId" autocomplete="off"></el-input>
      </el-form-item>
<!--      <el-form-item label="身份标签" :label-width="formLabelWidth">-->
<!--        <el-input v-model="population.tagId" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="户籍地址" :label-width="formLabelWidth">
        <el-input v-model="population.homeAddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio v-model="population.status" label="1">迁入</el-radio>
        <el-radio v-model="population.status" label="2">迁出</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="doSubmit()">确 定</el-button>
    </div>
  </el-dialog>
</div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {add, edit, findPopulationById, populationList, remove} from "@/api/system/population";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      arr:[],
      populationVo:{
        pageNum:1,
        pageSize:3,
      },
      total:0,
      population:{
        id:'',
        name:'',
        sex:'',
        photo:'',
        idCard:'',
        phone:'',
        typeId:'',
        addressId:'',
        pid:'',
        //tagId:'',
        homeAddress:'',
        status:'',
        unitId:'',
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      images:[],
      dialogImageUrl: '',
      dialogVisible: false,
      label:'1',
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    handleSizeChange(val) {
      this.populationVo.pageSize=val;
      this.populationList();
    },
    handleCurrentChange(val) {
      this.populationVo.pageNum=val;
      this.populationList();
    },
    populationList(){
      populationList(this.populationVo).then(
        res=>{
          this.arr=res.data.list
          this.total=res.data.total
        }
      )
    },
    handleSuccess(response,file,fileList){
      this.images.push(response.data)
      this.population.photo=this.images.join(',')
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    doSubmit(){
      if (this.population.id!=0){
        edit(this.population).then(
          res=>{
            this.$message.success(res.msg||"修改成功");
            this.dialogFormVisible=false;
            this.populationList();

          }
        )
      }else{
        add(this.population).then(
        res=>{
          this.$message.success(res.msg||"添加成功");
          this.dialogFormVisible=false;
          this.populationList();

        }
      )}
      },
    //回显
    handleEdit(id) {
      this.dialogFormVisible=true;
      findPopulationById(id).then(
        res=>{
          this.population = res.data;
        }
      )
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.populationList();
        })
      }).catch(() => {
        this.$message({
          type:'info',
        })
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.populationList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>

<style scoped>

</style>


